<template>
  <!-- 修改/设置 -->
  <Top-Page class="modify-wrap">
    <cu-custom bgColor="bg-gradual-white-3" :isBack="true">
      <template #content>{{ title }}</template>
      <template #right>
        <view class="cu-custom__right-btn" @click.stop="navBack(1)">确定</view>
      </template>
    </cu-custom>

    <Field clearable autosize :maxlength="maxlength" :placeholder="`${title}`" v-model.trim="value" />

    <view class="modify-hint"></view>
  </Top-Page>
</template>

<script>
import { useSaveRealInfo } from '@/hooks/useSaveRealInfo.js';
import NavBar from '../../../components/NavBar/NavBar.vue';
import Field from '../../../components/Field/Field.vue';
import { saveInfo } from '@/hooks/useSaveChanges';
import { isNumeric, isEmail, isName, isMobile, isIDcard } from '@/utils/regular.js';
export default {
  data() {
    return {
      saveInfo,
      type: '',
      title: '设置',
      leftText: '取消',
      rightText: '完成',
      maxlength: -1,
      index: -1,
      value: '',
      query: {}
    };
  },
  components: { NavBar, Field },
  onLoad(params) {
    Object.assign(this.query, params);
    this.type = params.type;
    this.value = params.text || '';
    this.index = params.index;
    this.title = params.title ?? '设置';
    this.leftText = params.leftText ?? '取消';
    this.rightText = params.rightText ?? '完成';
    this.maxlength = Number(params.maxlength || '-1');
  },
  methods: {
    async navBack(status) {
      let showToastTitle = '';
      if (this.query.valueType) {
        if (this.query.valueType == 'number' && !isNumeric.test(this.value)) {
          showToastTitle = '请正确填写数字';
        }
        if (this.query.valueType == 'email' && !isEmail.test(this.value)) {
          showToastTitle = '请正确填写邮箱';
        }
        if (this.query.valueType == 'name' && !isName.test(this.value)) {
          showToastTitle = '请正确填写姓名';
        }
        if (this.query.valueType == 'IDcard' && !isIDcard.test(this.value)) {
          showToastTitle = '请正确填写身份证号码';
        }
        if (this.query.valueType == 'mobile' && !isMobile.test(this.value)) {
          showToastTitle = '请正确填写手机号码';
        }
      }

      if (showToastTitle) {
        uni.showToast({
          title: showToastTitle,
          icon: 'none'
        });
        return;
      }

      const userInfo = uni.getStorageSync('userInfo');
      let data = {};

      if (['attended_schools', 'previous_employer', 'lived_address', 'mem_family_friends'].includes(this.type)) {
        data[this.type] = userInfo[this.type] ?? [];
        data[this.type].splice(this.index, 1, this.value);
      } else {
        data[this.type] = this.value;
      }

      if (!status) {
        this.value = '';
        uni.navigateBack();
        return;
      }
      console.log(data, 'data');
      // 实名认证信息单独保存
      const realInfoKey = ['user_name', 'identity', 'identity_address'];
      if (realInfoKey.includes(this.type)) {
        let params = {
          [this.type]: this.value
        };
        useSaveRealInfo(params);
        return;
      }
      const res = await this.saveInfo(data);

      // 如果保存成功，则更新全局数据
      if (res && res.success) {
        const app = getApp();
        app.globalData.modifyData = {
          value: this.value,
          type: this.type
        };

        uni.navigateBack();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.modify-wrap {
  :deep(.field-box) {
    background-color: #fff;
    padding-top: 40rpx;
    padding-bottom: 40rpx;
    text-align: left;
  }

  :deep(.field-value) {
    text-align: left;
  }

  :deep(.nav-bar__right-text) {
    padding: 0 24rpx;
    height: calc(var(--amplified_base) * 56rpx);
    background: #1677ff;
    border-radius: 8rpx;
    font-weight: 400;
    font-size: calc(var(--amplified_base) * 28rpx);
    color: #ffffff;
    text-align: center;
  }

  .modify-hint {
    color: #a4a4a4;
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
  }
}
</style>
